import React, { useContext, useEffect, useRef, useState } from "react";
// import request from "../../utils/request"
import request from "@/utils/request"
import { View, Text, StyleSheet, TouchableOpacity, Keyboard, KeyboardAvoidingView, TouchableWithoutFeedback } from "react-native";
import { pxToDp } from "@/utils/stylesKits";
import SvgUri from "react-native-svg-uri";
import { male, female } from "../../res/fonts/iconSvg";
import dayjs from 'dayjs';
import PickerDateComponent from '@/components/PickerDateComponent';
import { Input } from 'react-native-elements';
import Geo from '../Detail/index';
import CityJson from "../../res/citys.json";
import { createStaticNavigation, useNavigation, NavigationContainer, useRoute } from '@react-navigation/native';
import PickCommon from "@/components/PickCommon";
import { useStore,MyContext } from '../../store';
import { observer } from "mobx-react-lite";

const FinishOneself =observer( ()=> {
    const context =  useStore();
    const route = useRoute();
    const { params } = route;
    // console.error(params, '路由参数')
    const context2 =  React.useContext(MyContext);

    const nicknameRef = useRef(null);
    const hideKeyboard = () => {
        Keyboard.dismiss(); // 收起软键盘
        if (nicknameRef.current) {
            nicknameRef.current.blur(); // 使TextInput失去焦点
        }
    };

    const dateNow = new Date();
    const currentDate = `${dateNow.getFullYear()}-${dateNow.getMonth() + 1}-${dateNow.getDate()}`;
    const { userInfo, setUserInfo } = useContext(MyContext);
    const [gender, setGender] = useState("");
    const [date, setDate] = useState(dayjs());
    const [dataObj, setDateObj] = useState({
        brithday: '1994-04-01'
    });
    const [nickname, setNickname] = useState("");
    const [address, setAddress] = useState("");
    useEffect(() => {
        console.error(context, 'context');
        setAddress(context.userInfo.location.address);
    }, [context.userInfo.location.address]);
    useEffect(() => {
        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
            nicknameRef.current.blur(); // 让TextInput失去焦点
        });
        return () => {
            keyboardDidHideListener.remove(); // 清理监听器以避免内存泄漏
        };
    }, []);
    const brithdayRef = useRef();
    const brithdayHandle = () => {
        brithdayRef.current.show({
            mode: 'date',
            date: dataObj.brithday,
            success: (value) => {
                setDateObj({
                    ...dataObj,
                    brithday: value
                });
            },
        });
    }
    const cityRef = useRef(null);
    // const cityHandle = (value) => {
    //     console.error(value, 'value');
    //     setAddress(value);
    // }
    const showPick = () => {
        cityRef.current.show({
            cityHandle: (value) => {
                console.error(value, '任盈盈');
                if(value && Array.isArray(value)) {
                    let  str = '';
                    value.forEach((item, index) => {
                        str += item.name;
                    });
                    setAddress(str);
                }
                
            }, 
        });
    }
    const chooeseGender = (txt) => {
        setGender(txt);
    }
    const handlePress = () => {
        context2.userInfo.setLocation({address: '梅西'})
    }
    return (
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <View style={{ flex: 1, backgroundColor: 'white', padding: pxToDp(20) }}>
                <Text style={styles.txt1} >填写资料</Text>
                <Text style={styles.txt1} >提升我的魅力</Text>
                <View style={{ marginTop: pxToDp(20), marginBottom: pxToDp(20) }}>
                    <View style={styles.headIcon}>
                        <TouchableOpacity onPress={() => chooeseGender("男")}
                            style={[styles.iconMale, gender === "男" ? styles.iconMaleActive : null]}>
                            <SvgUri svgXmlData={male} width="36" height="36" />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => chooeseGender("女")}
                            style={[styles.iconMale, gender === "女" ? styles.iconMaleActive : null]} >
                            <SvgUri svgXmlData={female} width="36" height="36" />
                        </TouchableOpacity>
                    </View>
                </View>
                <PickerDateComponent ref={brithdayRef} />

                <View style={{ width: '100%', height: 40 }}>
                    <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
                        <Input
                            ref={nicknameRef}
                            value={nickname}
                            placeholder="设置昵称"
                            onChangeText={(nickname) => setNickname(nickname)}
                        />
                    </KeyboardAvoidingView>

                </View>
                <View>
                    <TouchableOpacity onPress={brithdayHandle} activeOpacity={1} style={{ width: '100%', height: 40, backgroundColor: 'transparent' }}>
                        <Input
                            value={dataObj.brithday}
                            placeholder="设置生日"
                            readOnly={true}
                        />
                    </TouchableOpacity>
                </View>
                <View>
                    <TouchableOpacity onPress={showPick} activeOpacity={1} style={{ width: '100%', height: 40, backgroundColor: 'transparent' }}>
                        <Input
                            value={address}
                            readOnly={true}
                        />
                    </TouchableOpacity>
                </View>
            </View>
        </TouchableWithoutFeedback>
    );
})
export default FinishOneself
const styles = StyleSheet.create({
    txt1: {
        fontSize: pxToDp(20), color: "#666", fontWeight: "bold"
    },
    headIcon: {
        marginTop: pxToDp(20),
        justifyContent: "space-around",
        width: "60%",
        flexDirection: "row",
        alignSelf: "center"
    },
    iconMale: {
        width: pxToDp(60),
        height: pxToDp(60),
        borderRadius: pxToDp(30),
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#eee'
    },
    iconMaleActive: {
        backgroundColor: 'red'
    }
})  